// 导入base.less
@import url(base.less);
// 导入normalize.less
@import url(normalize.less);
// 导入common.less公共样式
@import url(commom.less);
// 声明基准值变量
// width: (10 / 37.5rem)
@baseSize: 37.5rem;
@gColor: #14916a;

.bannar {
  width: (375 / @baseSize);
  height: (170 / @baseSize);


}

.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: (28 / @baseSize) 0 (0 / @baseSize) 0;
  background-color: #fff;

  .scan {
    padding-top: (25 / @baseSize);
    padding-bottom: (22 / @baseSize);
    background-color: rgba(20, 145, 106, 0.7);

    .scan-flex {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

    }

    .picbox {
      width: (68 / @baseSize);
      height: (68 / @baseSize);
      border-radius: (4 / @baseSize);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .qr-code {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        position: relative;
        color: #fff;
        font-size: (18 / @baseSize);


        .line-left {
          position: absolute;
          left: (-20 / @baseSize);
          top: 50%;
          transform: translateY(-50%);
          width: (14 / @baseSize);
          // height: (1 / @baseSize);
          // background-color: #fff;
          border-top: (2 / @baseSize) solid #fff;
        }

        .line-right {
          position: absolute;
          right: (-20 / @baseSize);
          top: 50%;
          transform: translateY(-50%);
          width: (14 / @baseSize);
          border-top: (2 / @baseSize) solid #fff;
        }

        &:nth-child(2) {
          font-size: (12 / @baseSize);
          margin-top: (10 / @baseSize);
          color: #333;

          a {
            color: #f6f6f6;
          }
        }
      }

    }
  }

  .contact-content {
    padding: (21 / @baseSize) 0;
    background-color: #f6f6f6;

    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;

      li {
        display: flex;
        justify-content: start;
        font-size: (12 / @baseSize);
        line-height: (24 / @baseSize);

      }
    }
  }

  .appoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: (33 / @baseSize) 0;


    //标题
    h4 {
      position: relative;
      font-size: (18 / @baseSize);
      font-weight: normal;
      color: #333;
      margin-bottom: (22 / @baseSize);


      // 左右线条
      .line-left {
        position: absolute;
        left: (-30 / @baseSize);
        top: 50%;
        transform: translateY(-50%);
        width: (20 / @baseSize);
        border-top: (2 / @baseSize) solid #333;
      }

      .line-right {
        position: absolute;
        right: (-30 / @baseSize);
        top: 50%;
        transform: translateY(-50%);
        width: (20 / @baseSize);
        border-top: (2 / @baseSize) solid #333;
      }

    }

    .info-list {

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      li {
        position: relative;
        min-width: (355 / @baseSize);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: (13 / @baseSize);

        // 等腰三角形
        &:nth-child(4) {
          &::after {
            content: '';
            position: absolute;
            right: (3 / @baseSize);
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: (8 / @baseSize) solid rgba(51, 51, 51, 0.8);
            border-left: (8 / @baseSize) solid transparent;
            border-right: (8 / @baseSize) solid transparent;
            // border-bottom: (10 / @baseSize) solid #aaa;
          }
        }

        span {
          position: relative;
          font-size: (12 / @baseSize);
          line-height: (24 / @baseSize);
          color: #333;

          i {
            color: #ff0000;
            position: absolute;
            left: (-7 / @baseSize);
          }
        }

        input,
        select {
          outline: none;
          width: (273 / @baseSize);
          height: (35 / @baseSize);
          border: (1 / @baseSize) solid #999;
          padding-left: (10 / @baseSize);
          font-size: (12 / @baseSize);
          color: #aaa;

          option {
            font-size: (12 / @baseSize);
            color: #aaa;
          }
        }




      }

      a {

        font-size: (12 / @baseSize);
        color: #ffffff;
        background-color: #333;
        padding: (9 / @baseSize) (45 / @baseSize);
        border-radius: (16 / @baseSize);
        margin-top: (13 / @baseSize);
      }
    }


  }

  #allmap {
    width: (375 / @baseSize);
    height: (266 / @baseSize);
    background-color: #14916a;
    // img {
    //   width: 100%;
    //   height: 100%;
    //   object-fit: cover;
    // }
  }
}